<template>
  <div>
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in listData" :key="index">
          <td>{{ item.time }}</td>
          <td>{{ item.uname }}</td>
          <td>{{ item.result }}</td>
          <td>{{ item.info }}</td>
          <td @click="xiangqing(item)">{{ item.operation }}</td>
        </tr>
      </tbody>
      <div class='box' v-show="flag">
        <div><span>就诊记录详情</span><span @click="fn">X</span></div>
        <div>就诊日期:{{dateTime}}</div>
        <div>医生姓名:{{username}}</div>
        <div>诊断结果:{{resultData}}</div>
        <div>处方信息:{{infoData}}</div>
      </div>
    </table>
  </div>
</template>
<script>
export default {
  props: ["listData"],
  data() {
    return {
      flag:false,
      dateTime:'',
      username:'',
      resultData:'',
      infoData:''
    };
  },
  methods: {
    xiangqing(data) {
      this.flag=!this.flag
      this.dateTime=data.time
      this.username=data.uname
      this.resultData=data.result
      this.infoData=data.info
    },
    fn(){
      this.flag=!this.flag
    }
  },
};
</script>
<style scoped>
.box{
  width: 200px;
  height: 200px;
  background-color: skyblue;
  margin: 0 auto;
}
</style>